const {ccclass, property} = cc._decorator;

@ccclass
export default class SpineDressUp extends cc.Component {

    @property(sp.Skeleton)
    spine: sp.Skeleton = null;

    @property(cc.SpriteFrame)
    skinWings: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    skinWings2: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    skinDecorate: cc.SpriteFrame = null;

    @property(cc.SpriteFrame)
    skinBody: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    skinAmL: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    skinAmR: cc.SpriteFrame = null;

    @property(cc.SpriteFrame)
    skinHairBackL: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    skinHairFrontL: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    skinHairBackS: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    skinHairFrontS: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    skinHairShadowS: cc.SpriteFrame = null;
    @property(cc.SpriteFrame)
    skinHairShadowL: cc.SpriteFrame = null;

    @property(cc.SpriteFrame)
    skinFace: cc.SpriteFrame = null;

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        cc.debug.setDisplayStats(false);
        console.log(`========== spine`)
        console.log(this.spine)
        console.log(`========== runtimeData`)
        console.log(this.spine.skeletonData.getRuntimeData())

        this.dressUpFace();

        this.dressUp('3_clothse_body',this.skinBody);
        this.dressUp('3_clothse_hand_L',this.skinAmL);
        this.dressUp('3_clothse_arm_R',this.skinAmR);

        this.dressUp('4_decorate',this.skinDecorate);
        this.dressUp('4_wings',this.skinWings);
        this.dressUp('4_wings2',this.skinWings2);
        
        this.dressUp('1_hair_back_long',this.skinHairBackL);
        this.dressUp('1_hair_front_long',this.skinHairFrontL);
        this.dressUp('1_hair_back_short',this.skinHairBackS);
        this.dressUp('1_hair_front_short',this.skinHairFrontS);
        this.dressUp('1_hair_shadow_short',this.skinHairShadowS);
        this.dressUp('1_hair_shadow_long',this.skinHairShadowL);
    
    }

    dressUpFace() {
        var data = this.spine.skeletonData.getRuntimeData();
        var skin = data.defaultSkin;
        var slot = this.spine.findSlot('2_face')
        const slotIndex = data.findSlotIndex('2_face');      
        var atts = skin.attachments[slotIndex];
        for (const key in atts) {
            if (atts.hasOwnProperty(key)) {
                var att = atts[key];
                var texture = this.skinFace.getTexture()
                att.setRegion(this.createRegion(texture));
                att.updateOffset();
                att.updateWorldVertices(slot, true);
            }
        }
    }

    dressUp(slotName,spriteFrame) {
        var slot = this.spine.findSlot(slotName)
        var texture = spriteFrame.getTexture()
        var oldAtt = slot.getAttachment();

        if (oldAtt instanceof sp.spine.MeshAttachment) {
            this.createMeshAttachmentByTexture(slot,texture, oldAtt);
        } else if (oldAtt instanceof sp.spine.RegionAttachment) {
            this.createRegionAttachmentByTexture(slot,texture, oldAtt);
        }
        
    }

    createMeshAttachmentByTexture(slot, texture, oldAtt) { 
        var att = new sp.spine.MeshAttachment(oldAtt.name);
        att.region = this.createRegion(texture);
        att.bones = oldAtt.bones;
        att.color = oldAtt.color;
        att.hullLength = oldAtt.hullLength;
        att.inheritDeform = oldAtt.inheritDeform;
        att.path = oldAtt.path;
        att.regionUVs = oldAtt.regionUVs;
        att.tempColor = oldAtt.tempColor;
        att.triangles = oldAtt.triangles;
        att.vertices = oldAtt.vertices;
        att.worldVertices = oldAtt.worldVertices;
        att.worldVerticesLength = oldAtt.worldVerticesLength;

        att.updateUVs();
        att.updateWorldVertices(slot, true);

        slot.attachment = att;
    }
    
    createRegionAttachmentByTexture(slot, texture, oldAtt) {
        var att = new sp.spine.RegionAttachment(oldAtt.name);
        att.region = this.createRegion(texture);
        att.color = oldAtt.color;
        att.path = oldAtt.path;
        att.tempColor = oldAtt.tempColor;
        att.vertices = oldAtt.vertices;
        att.rotation = oldAtt.rotation;
        att.scaleX = oldAtt.scaleX;
        att.scaleY = oldAtt.scaleY;
        att.offset = oldAtt.offset;
        att.width = oldAtt.width;
        att.height = oldAtt.height;
        att.x = oldAtt.x;
        att.y = oldAtt.y;
        att.setRegion(att.region);
        att.updateOffset();
        att.updateWorldVertices(slot, true);
        
        slot.attachment = att;
    }

    createRegion(texture) {
        var region = new sp.spine.TextureAtlasRegion();
        region.width = texture.width;
        region.height = texture.height;
        region.originalWidth = texture.width;
        region.originalHeight = texture.height;
        region.rotate = false;
        region.u = 0;
        region.v = 0;
        region.u2 = 1;
        region.v2 = 1;

        region.page = new sp.spine.TextureAtlasPage();
        region.page.name = texture.name;
        region.page.width = texture.width;
        region.page.height = texture.height;
        region.page.uWrap = sp.spine.TextureWrap.ClampToEdge;
        region.page.vWrap = sp.spine.TextureWrap.ClampToEdge;

        var texBody = new sp.SkeletonTexture({ width: texture.width, height: texture.height });
        texBody.setRealTexture(texture)
        region.texture = texBody;
    
        return region;
    }

}
